﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="_meta :: header">
    <meta charset="utf-8">
    <title>诊断总控</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 权限配置 <span
        class="c-gray en">&gt;</span>用户管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                             href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <!-- <div class="text-c">
        <input type="text" class="input-text" style="width:250px" placeholder="输入管理员名称" id="" name="name"/>
        <button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
    </div> -->
    <div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
			<a href="javascript:;" onclick="stop_all()"
               class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 全部停止</a>
			<a href="javascript:;" onclick="start_all()"
               class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 全部开始</a>
		</span>
        <span class="r">共有数据：<strong th:text="${pageInfo.total}"></strong> 条</span>
    </div>
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr>
            <th scope="col" colspan="10">诊断列表</th>
        </tr>
        <tr class="text-c">
            <th width="40">机组编号</th>
            <th width="150">机组名称</th>
            <th width="150">机组信息</th>
            <th width="50">切换按钮</th>
            <th width="50">运行状态</th>
            <th width="50">数据检测</th>
        </tr>
        </thead>
        <tbody>
        <tr class="text-c" th:if="${pageInfo.list.size() == 0}">
            <td colspan="6"><strong>暂无数据</strong></td>
        </tr>
        <tr class="text-c" th:each="diagnosis:${pageInfo.list}">
            <td th:text="${diagnosis.machineGroup.id}"></td>
            <td th:text="${diagnosis.machineGroup.jizuName}"></td>
            <td th:text="${diagnosis.machineGroup.jizuDes}"></td>
            <td class="td-manage">
                <button
                        th:data-id="${diagnosis.id}"
                        th:data-status="${diagnosis.status}"
                        onclick="change_status(this.getAttribute('data-id'),this.getAttribute('data-status'))"
                        th:text="${diagnosis.status=='启动'?'停止':'启动'}">>
                </button>
            </td>
            <td class="td-manage">
                <input type="checkbox" th:checked="${diagnosis.status=='启动'}" th:value="${diagnosis.status}"/>
            </td>
            <td class="td-manage">
                <button onclick="check(${diagnosis.id})">查看</button>
            </td>
        </tr>

        </tbody>
    </table>
    <div th:include="_pagination :: page"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<div th:replace="_footer :: footerjs">
</div>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"
        src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" th:src="@{/lib/datatables/1.10.0/jquery.dataTables.min.js}"
        src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" th:src="@{/lib/laypage/1.2/laypage.js}" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    /*
        参数解释：
        title	标题
        url		请求的url
        id		需要操作的数据id
        w		弹出层宽度（缺省调默认值）
        h		弹出层高度（缺省调默认值）
    */
    /*管理员-增加*/
    function unit_add(title, url, w, h) {
        layer_show(title, url, w, h);
    }

    /*管理员-编辑*/
    function unit_edit(title, url, w, h) {
        layer_show(title, url, w, h);
    }

    /*管理员-删除*/
    function unit_del(obj, url) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: {"id": $(obj).closest("tr").children("td").eq(0).children("input").eq(0).val(),},
                success: function (data) {
                    if (data == 1) {
                        $(obj).closest("tr").eq(0).remove();
                        //layer.close()layer.index;
                        layer.msg('已删除!', {
                            icon: 1,
                            time: 1000
                        });
                        //window.location.reload();
                        //parent.location.reload();
                    } else {
                        layer.msg('删除失败!', {icon: 5, time: 1000});
                    }
                },
                error: function (data) {
                    console.log("error");
                    console.log(data.status);
                    console.log(data.msg);

                },
            });
        });
    }

    //批量删除
    function deleteAll(url) {
        var _list = new Array();
        $('input[name="id"]:checked').each(
            function (i) {
                _list[i] = $(this).val();
            });
        if (_list.length == 0) {
            layer.msg("请选择删除的机组");
            return false;
        }
        layer.confirm('确定要删除选中的全部数据吗？', {
            btn: ['确定', '取消']
            // 按钮
        }, function () {
            $.ajax({
                url: url,// 跳转到 action
                data: JSON.stringify(_list),
                type: 'post',
                cache: false,
                dataType: 'json',
                contentType: "application/json",  //发送信息至服务器时内容编码类型。
                success: function (data) {
                    if (data == 1) {
                        window.location.reload();
                    } else {
                        layer.msg('删除失败!', {icon: 5, time: 1000});
                    }
                },
                error: function () {
                    layer.msg("异常！");
                }
            });
        }, function () {

        });
    }

    function start_all() {
        $.ajax({
            url: '/diagnosis/start-all',
            success: (data) => {
                console.log(data);
                location.replace(location.href);
            }
        });
    }

    function stop_all() {
        $.ajax({
            url: '/diagnosis/stop-all',
            success: (data) => {
                console.log(data);
                location.replace(location.href);
            }
        });
    }

    function change_status(id, status) {
        status = status == '启动' ? '未启动' : '启动';
        $.ajax({
            url: '/diagnosis/change-one',
            data: {
                id: id,
                status: status
            },
            success: (data) => {
                console.log(data);
                location.replace(location.href);
            }
        });
    }

    function check(id) {
        layer_show('实时诊断',)
    }
</script>
</body>
</html>